<template>
  <div style="height: 100%;background-color:white ;">
    <el-row>
      <el-col :span="24">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="journal.name" placeholder="请输入期刊名称" @keyup.enter.native="advanceConfirm">
              <i class="el-input__icon el-icon-search" slot="prefix"></i>
              <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
            </el-input>
          </div>
          <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">期刊分类</div>
              <div style="display: inline-block">
                <el-input v-model="journal.category" size="small" style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">ISSN</div>
              <div style="display: inline-block">
                <el-input v-model="journal.issn" size="small" style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">CN</div>
              <div style="display: inline-block">
                <el-input v-model="journal.cn" size="small" style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block"style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">版本号</div>
              <div style="display: inline-block">
                <el-input v-model="journal.version" size="small" style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">发布时间</div>
              <div style="display: inline-block">
                <el-date-picker v-model="journal.releaseTime" :picker-options="pickerOptions" align="right"
                                end-placeholder="截止日期"
                                range-separator="至" value-format="yyyy-MM-dd"
                                size="small" start-placeholder="开始日期" style="width: 300px;"
                                type="daterange" unlink-panels>
                </el-date-picker>
              </div>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="6" :span="6">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="reset">重置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="officialTableData" border style="width: 100%;" stripe :height="tableHeight"
                row-key="id">
        <el-table-column label="期刊名称" min-width="220" prop="name"></el-table-column>
        <el-table-column label="期刊分类" min-width="130" prop="categoryStr"></el-table-column>
        <el-table-column label="ISSN" min-width="130" prop="issn"></el-table-column>
        <el-table-column label="CN" min-width="120" prop="cn"></el-table-column>
        <el-table-column label="年份" min-width="80" prop="publishYear"></el-table-column>
        <el-table-column label="卷" min-width="60" prop="volume"></el-table-column>
        <el-table-column label="期" min-width="60" prop="issue"></el-table-column>
        <el-table-column label="版本号" min-width="100" prop="version"></el-table-column>
        <el-table-column label="发布时间" min-width="160"
                         prop="releaseTime"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="160">
          <template slot-scope="scope">
            <span><el-link type="primary" @click.prevent="editMetadata(scope.row.id,scope.$index)">元数据</el-link></span>
            <span><el-link type="primary" @click.prevent="detail(scope.row.id)">详情</el-link></span>
            <span><el-link :style="{ display:editEnable }" type="primary"
                           @click.prevent="cancelRelease(scope.row.id)">取消发布</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          :total="totalNum"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>

export default {
  name: "OfficialJournal",
  props: ['showStatus'],
  data() {
    return {
      officialTableData: [],
      totalNum: 0,
      currentPage: 1, // 第几页
      pageSize: 10, // 每页显示的数据个数
      noData: true,
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
      journal: {type: 1},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      editEnable: ''
    }
  },
  methods: {
    //分页
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTableData();
    },
    detail: function (id) {
      this.$router.push({
          path: '/journalLib/Detail',
          query: {id: id, editType: "publish"}
        }
      )
    },
    cancelRelease(id) {
      this.$confirm('确定取消发布？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = new URLSearchParams();
        param.append("id", id)
        this.axios.post('/pmph/action/journal/officialToDraft', param).then((response) => {
          this.getTableData();
        })
      })
    },
    editMetadata(id, index) {
      this.$router.push({
        path: "/journalLib/Metadata",
        query: {
          id: id,
          metadata: this.officialTableData[index].metadata,
          disabled: true
        }
      });
    },
    getTableData: function () {
      this.axios.get('/pmph/action/journal/selectList', {
        params: {
          currentPage: this.currentPage, // 第几页
          pageSize: this.pageSize, // 每页显示的数据个数
          searchJournal: JSON.stringify(this.journal)
        }
      }).then((response) => {
        this.officialTableData = response.data.journalIPage.records;
        this.totalNum = response.data.journalIPage.total;
        this.noData = response.data.journalIPage.total <= 0;
        this.showAdvance = false;
      })
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.getTableData();
    },
    advanceConfirm: function () {
      this.advanceCancel();
      this.getTableData();
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    reset: function () {
      this.journal = {};
      this.journal.type = 1;
    },
  },
  activated() {
    if (!this.$route.meta.isUseCache) {
      this.getTableData();
    }
  },
  created() {
    if (this.showStatus === 'true') {
      this.editEnable = 'none'
    }
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 140;
    this.getTableData();
  },
}
</script>

<style scoped>

</style>
